<template>
<div>
  <hr size="5px" color="red">
     <table class="table">
        <tr>
          <td></td>
          <td></td>
          <td class="loginandregister" >

          <!--   用if来进行登录状态的判断 -->
           <div v-if="!logging_status()">
            <router-link to="/login">登录</router-link>|
            <router-link to="/register">注册</router-link>
            </div>
            <div v-else>
              欢迎用户: [{{user}}]-----  <span @click="loginout">登出</span>
            </div>
            </td>
        </tr>
      </table>
      <hr size="4px" color="silver">

      <div class="title">
        <table>
          <tr>
            <td style="width:550px"><img :src=imgUrl alt="logo" class="img1" ></td>
            <td><el-input v-model="searchValue" placeholder="请输入内容" style="width:465px; height:32px;  margin:0px; padding:0px; line-height:30px;"></el-input> 
            <span class="search" @click="search(searchValue)">搜索</span></td>
            <td>
                <div class="nav">
                  <i class="el-icon-shopping-cart-2"></i>
                  <router-link to="/shoppingTrolley"> <span>我的购物车</span></router-link>
                </div>
            </td>
          </tr>
        </table>

      </div>
      <div class="line"></div>
            <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                  background-color="red"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                   
                  >
                  
                   <el-submenu index="1" style="margin-left: 200px ;">
                    <template slot="title">书籍分类</template>
                    <template v-for=" item in  catlogList" >
                 <el-menu-item index="1-1" @click="tobooks(item.id)">{{item.catelogName}}</el-menu-item>
                    </template>
                  </el-submenu>

                  
                  <el-menu-item index="2" style="margin-left: 100px ;"><router-link to="index">首页</router-link></el-menu-item>
                    
                  </el-submenu>

                <el-menu-item index="3" style="margin-left: 100px ;" > <router-link to="/books">  全部书籍 </router-link> </el-menu-item>
                  
                  <el-menu-item index="4" style="margin-left:100px;"><a href="" target="_blank">排行</a></el-menu-item>
            </el-menu>


            <table class="table1">
                <tr>
                  <td class="td1"><img :src="'http://localhost:8080/BMS/'+bookList.imageUrl" alt="无法加载"></td>
                  <td class="td2">
                    <li><h3 style="float:left; margin-top:8%">[{{catelogName}}]《{{bookList.productName}}》   </h3></li>
                    <li><p style="text-align: left;">轩城图书商城价： {{bookList.price}} 元<br>
                    运费：8 元 满 38 元免邮费<br>
                    已经销售：105<br>
                    商品评价：0<br>
                    服务：商品由轩城商城负责发货，如发现印、装质量问题，影响阅读，请及时与客服人员联系（电话：17674108531）调换，暂不支持退货。</p></li>
                    <li style="text-align: left;">选择版本：<br> 暂无库存</li>
                  </td>
                </tr>
            
            </table>

           
            <img @click="add_shopping(bookList.id,bookList.price,bookList.productName)" class="add"   src="../../assets/images/shoppingcart.jpg" alt="无法加载">

              <div class="message">
                <p style="font-size:25px">评论区</p>

                <div class="comment_area" v-for=" item in messageList">
                  <li>
                    <div class="area1" >
                     <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    <p>{{item.userName}}</p>
                    </div>
                   </li>
                   <li class="area2">{{item.message}}</li>
                </div>

                
                <el-input
                      style=" margin-bottom: 1px; "
                     type="textarea"
                     autosize
                     placeholder="请输入内容"
                     v-model="textarea1">
                </el-input><el-button type="primary" style="float:left; margin-top:1%;" @click="pushMessage()">发表回复</el-button>
              
                </div>



 </div>


  
</template>

<script>


export default {
  name:'shoppingShow',
  data(){
    return{
      //搜索
        searchValue:'',
       textarea1: '',
       activeIndex: '2',
      activeIndex2: '1',
       imgUrl: require('../../assets/images/logo.jpg'),
         catelogName:'',
      
      bookList:[{
        id:'',
        catlogId:'',
        productName:'',
        price:'',
        spec:'',
        stockQty:'',
        refPrice:'',
        imageUrl:'',
        shelfStatu:'',
      }]
      , shoppingList:{
            id:'',
             proId:'',
            userId:'',
            addDate:'',
            price:'',
            quantity:'',
            productName:''

        },
        catlogList:[{
        id:'',
        proId:'',
        catelogCode:'',
        catelogName:'',

      }],
      messageList:[{
        id:'',
        useId:'',
        userName:'',
        productName:'',  
        message:''

      }]
    }
  },created(){
    
   
  },
  mounted(){
    this.showShopping()
    this.getcatlogData()
/*  this.getMessageData() */
  },
  methods:{
    //elementUi上的方法没什么用
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      //用于各种页面的转跳的接收，来显示书籍
      showShopping:function(){
         this.bookList.id= this.$route.params.id
         this.catelogName= this.$route.params.catelogName
         console.log(this.bookList.id)
         this.$axios.get("/user/shoppingshow",{params:{id:this.bookList.id}}).then(res=>{
           
           //用于评论区的显示
           this.bookList=res.data
            this.$axios.get("/message/getmessagedata",{params:{productName: this.bookList.productName}}).then(res=>{
            this.messageList=res.data
          
      })
           console.log(this.bookList)
         })
      }
      ,
     logging_status:function(){
        if(localStorage.getItem("user")!=null){
         this.user=localStorage.getItem("user");
          return true
          
        }
        else{
          return false
        }
      },
         loginout:function(){
        localStorage.removeItem("user");
        localStorage.removeItem("userId");
         this.user=localStorage.getItem("user");
         
         //用于页面的手动刷新 
          this.$router.go(0)
        alert("退出登录");
    
      },
      //加入购物车（需要的信息，用户ID，商品ID，价格）商品书籍的信息由转跳中得到，用户ID从localStorage中得到，如域中没有，就无法加入
      
      add_shopping:function(id,price,productName){
        this.shoppingList.proId=id;
        this.shoppingList.userId=localStorage.getItem("userId");
        this.shoppingList.price=price;
        this.shoppingList.productName=productName;
        console.log(this.shoppingList)
        if(this.shoppingList.userId!=null){
        this.$axios.get("/shopping/addShopping",{params:{proId:this.shoppingList.proId,userId:this.shoppingList.userId,price:this.shoppingList.price,ProductName:this.shoppingList.productName}}).then(res=>{
         alert("成功加入购物车")
        })
        }     
        else{
          alert("加入失败，请先进行用户登录")
        }
      },
        getcatlogData:function(){
        this.$axios.get("/catlog/getcatlogs").then(res=>{
              this.catlogList=res.data
              console.log(this.catlogList)
        })
      },
      
      tobooks:function(id){
        this.$router.push(
      {
        name:'books',
        params:{id:id}
      }
        )
      },
      //用户留言
      pushMessage:function(){
        var UserId =localStorage.getItem("userId");
        var userName =localStorage.getItem("user");
        console.log(this.bookList.productName)
        if(UserId!=null){
        this.$axios.get("/message/addmessage",{params:{useId:UserId,userName:userName,productName:this.bookList.productName,message:this.textarea1}}).then(res=>{
              if(res.data!=0){
                alert("发表成功")

                  //用于发表成功之后的显示
                  this.$axios.get("/message/getmessagedata",{params:{productName: this.bookList.productName}}).then(res=>{
                  this.messageList=res.data})
              }
              else{
                alert("发表失败")
              }
        })
        }
        else{
          alert("发表失败，请先进行登录")
        }
      },

     /*  getMessageData:function(){
        console.log(this.bookList.productName)
     
      } */
    //搜索
     search:function(searchValue){
       this.$router.push({
         name:'searchShow',
         params:{searchValue}
       })
     }



      
  }
}
</script>

<style scoped>
.loginandregister{
  float: right;
  line-height: 50px;
  margin-right:10px ;
}
.table{
  width: 100%;
  height: 50px;
  color: #000;
  background-color: rgb(238, 231, 231);
  
}
.img1{
  width: 80%;
  height: 150px;
  float: left;
}
.nav{
  width: 120px;
  height: 40px;
  margin-left: 120px ;
  line-height: 40px;
  background-color: red;
}
.search{
  margin-left: -4.5px;
  display: inline-block;
  background-color: #ca151e;
   width: 50px;
   height: 36px;
   line-height: 32px;
   position: relative;
   top: -1px;
}
a{
  text-decoration: none;
}

.table1{
  width: 75%;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
}

.td1{
  width: 40%;
  
  border-right: 1px solid black;
}
.td1 img{
  width: 50%;
  height: 80%;
  margin-top: -10px;
  margin-left: 4%;

}
.td2{
  width: 60%;

}
li{
  list-style: none; 


}
.td2 li:nth-child(1){
  height: 33.3%;
   border-bottom: 1px solid black;
}

.td2 li:nth-child(2){
  height: 33.3%;
   border-bottom: 1px solid black;
}
.td2 li:nth-child(3){
  height: 33.3%;
  border-bottom: 1px solid black;
}

.add{
  margin-right: -65%;
  margin-top: 2%;
}

.message{
  width: 75%;
  height: 100%;
 margin: 40px auto;
  background-color: rgb(236, 236, 236);
  border-radius: 20px;
  
}

.comment_area{
  width: 70%;
  height: 100%;
  float: left;

}
.area1{
  width: 10%;
  position: relative;
  top: 20px;
}

.area2 {

  width: 100%;
  height:80px;
  line-height: 80px;
  border: 2px solid rgb(204, 200, 200);
  border-radius: 2px;
  position: relative;
  top: -50px;
  text-align: left;
  left: 100px;
}
</style>